<mat-toolbar class="spaceBetweenCenter" style="box-shadow: none">
	<div style="display: flex; align-items: center;">
		<div style="display: flex; align-items: center;">
			<mat-form-field appearance="outline" class="goToPage">
				<mat-label>
					Page
				</mat-label>
				<input
					#page
					(change)="changePage(page.value); refreshData()"
					*ngIf="querySize >= 100000"
					[max]="querySize"
					[value]="params.page"
					matInput
					min="0"
					type="number">
				<mat-select
					(selectionChange)="changePage($event.value); refreshData()"
					*ngIf="querySize < 100000"
					[value]="params.page">
					<ng-container
						*ngFor="let item of [].constructor(Math.floor(querySize / params.pageSize) + 1); let i = index">
						<mat-option [value]="i">
							{{ i }}
						</mat-option>
					</ng-container>
				</mat-select>
			</mat-form-field>
			<mat-paginator
				(page)="changePage($event.pageIndex, $event.pageSize); refreshData()"
				[length]="querySize"
				[pageIndex]="params.page"
				[pageSizeOptions]="[50, 100, 500, 2000]"
				[pageSize]="params.pageSize"
			></mat-paginator>
		</div>
		<button
			(click)="refreshData()"
			mat-icon-button>
			<span class="material-symbols-outlined notranslate">
				repeat
			</span>
		</button>
	</div>

	<mat-chip-list #chipList style="font-size: 12px;">
		<ng-container
			*ngFor="let chips of params.chips.split(';'); let i = index">
			<ng-container *ngIf="chips">
				<mat-chip
					(removed)="removeChips(chips)"
					color="primary"
					selected>
					{{ chips }}
					<button matChipRemove>
						<span class="material-symbols-outlined notranslate" style="font-size: 18px">
							cancel
						</span>
					</button>
				</mat-chip>
				<ng-container *ngIf="i < (params.chips.split(';').length - 2)">
					{{ configuration.getByName("operand")?.value }}
				</ng-container>
			</ng-container>
		</ng-container>
	</mat-chip-list>

	<div>
		<mat-form-field appearance="standard">
			<mat-label>Sort By</mat-label>
			<mat-select
				(selectionChange)="refreshData()"
				[(ngModel)]="params.field">
				<ng-container *ngFor="let column of displayedColumns">
					<mat-option
						*ngIf="column !== actionColum"
						[value]="column">
						{{ column }}
					</mat-option>
				</ng-container>
			</mat-select>
		</mat-form-field>
		<mat-button-toggle-group
			(change)="refreshData()"
			*ngIf="params.field"
			[(ngModel)]="params.direction">
			<mat-button-toggle matTooltip="A → Z" value="asc">↑</mat-button-toggle>
			<mat-button-toggle matTooltip="Z → A" value="desc">↓</mat-button-toggle>
			<mat-button-toggle matTooltip="No sort" value="">×</mat-button-toggle>
		</mat-button-toggle-group>
		<button
			(click)="setAutoUp()"
			mat-icon-button
			matTooltip="Reload data periodically"
			matTooltipPosition="left">
			<span class="material-symbols-outlined notranslate">
				{{ autoUp ? 'repeat_one_on' : 'repeat_one' }}
			</span>
		</button>
	</div>
</mat-toolbar>

<mat-progress-bar *ngIf="isLoading" mode="indeterminate" style="position: absolute; z-index: 10000;"></mat-progress-bar>

<div class="scrollDiv" style="height: calc(100vh - 154px);">

	<table [dataSource]="dataSource" class="table mat-elevation-z8" mat-table range-selection>
		<ng-container
			*ngFor="let column of displayedColumns; let i = index"
			[stickyEnd]="column === actionColum"
			matColumnDef="{{column}}"
		>
			<th *matHeaderCellDef
				class="resizeColumn"
				[style.min-width]="column.length * 8 + 'px'"
				mat-header-cell>

				<ng-container *ngIf="column !== actionColum">
					<mat-form-field appearance="legacy">
						<mat-label>{{ column }}</mat-label>
						<input (matChipInputTokenEnd)="addChips(column, $event)"
							   [(ngModel)]="filter[column]"
							   [matAutocomplete]="autoGroup"
							   [matChipInputFor]="chipList"
							   matInput>
						<mat-autocomplete
							(optionSelected)="filter[column] = $event.option.value"
							#autoGroup="matAutocomplete">
							<mat-option
								[value]="comp.symbol + ' ' + comp.example"
								*ngFor="let comp of selectedServer!.driver.language.comparators"
								[matTooltip]="comp.definition"
								matTooltipPosition="right">
								{{ comp.symbol }}
							</mat-option>
						</mat-autocomplete>
					</mat-form-field>
				</ng-container>

				<div *ngIf="column === actionColum && dataSource.data.length" style="display: flex; flex-direction: column; align-items: center;">
					<div>
						<button
							[disabled]="selection.isEmpty()"
							[matMenuTriggerFor]="actions"
							mat-icon-button>
							<span class="material-symbols-outlined notranslate">
								more_vert
							</span>
						</button>
						<mat-checkbox
							(change)="$event ? toggleAllRows() : null"
							[checked]="selection.hasValue() && isAllSelected()"
							[indeterminate]="selection.hasValue() && !isAllSelected()"
							color="primary">
						</mat-checkbox>
					</div>
					<span *ngIf="selection.selected.length > 0"
						  style="font-size: 12px; margin-top: -2px; color: white">
						{{ selection.selected.length }} selected
					</span>
				</div>

			</th>
			<td *matCellDef="let row; let i = index"
				[class.selected-row]="selection.isSelected(row)"
				mat-cell>

				<ng-container *ngIf="column === actionColum">
					<button
						(click)="editRow(i, row)"
						disableRipple
						mat-icon-button>
						<span class="material-symbols-outlined notranslate">
							edit
						</span>
					</button>

					<mat-checkbox
						(change)="$event ? selection.toggle(row) : null"
						(click)="shiftCheckBox($event, row); $event.stopPropagation();"
						[checked]="selection.isSelected(row)"
						color="primary"
						disableRipple>
					</mat-checkbox>
				</ng-container>

				<app-cell
					*ngIf="column !== actionColum"
					[column]="column"
					[stringify]="stringify"
					[value]="row[column]"
				></app-cell>
			</td>
		</ng-container>

		<tr *matHeaderRowDef="displayedColumns; sticky: true" mat-header-row></tr>
		<tr *matRowDef="let row; columns: displayedColumns;" mat-row></tr>

		<tr *matNoDataRow class="mat-row">
			<td class="mat-cell" colspan="100%">No Data</td>
		</tr>

	</table>
</div>

<mat-menu #actions="matMenu">
	<span (click)="batchUpdate()"
		  mat-menu-item>
		Batch Update
	</span>
	<span (click)="exportRows()"
		  mat-menu-item>
		Export
	</span>
	<span (click)="duplicateRows()"
		  mat-menu-item>
		Duplicate
	</span>
	<span
		(click)="removeRows()"
		mat-menu-item>
		Delete
	</span>
</mat-menu>
